<template>
  <div class="main">
    <div class="top">
      <el-button type="primary" icon="el-icon-plus" @click="showbox"
        >添加设置</el-button
      >
    </div>
    <div class="mid">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border:true
        class="contentbox"
      >
        <el-table-column
          label="可分配资金"
          prop="monney"
          align="center"
        ></el-table-column>
        <el-table-column
          label="参与人数"
          prop="joinNum"
          align="center"
        ></el-table-column>
        <el-table-column
          label="入围人数"
          prop="intoNum"
          align="center"
        ></el-table-column>
        <el-table-column
          label="有效期"
          prop="userfulDate"
          align="center"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          prop="addDate"
          align="center"
          width="200px"
        ></el-table-column>
        <el-table-column
          label="结束时间"
          prop="endDate"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="scope">
            <el-button @click="editShow(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deletehandle(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="4"
        :current-page.sync="currentPage"
        :page-sizes="[4, 8]"
        layout="total,sizes,prev,pager,next,jumper"
        :hide-on-single-page="false"
        :total="total"
        @size-change="sizeChange"
      ></el-pagination>
    </div>
    <el-dialog title="更新设置" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form">
        <el-form-item
          label="可分配资金（万）："
          :label-width="formLabelWidth"
          label-position="left"
        >
          <el-input
            v-model="form.monney"
            autocomplete="off"
            class="msgbox"
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item label="参与人数：" :label-width="formLabelWidth">
          <el-input v-model="form.joinNum" placeholder="" type=""> </el-input>
        </el-form-item>
        <el-form-item label="入围人数：" :label-width="formLabelWidth">
          <el-input v-model="form.intoNum" placeholder=""> </el-input>
        </el-form-item>
        <el-form-item label="入围限制：" :label-width="formLabelWidth">
          销售：
          <el-input
            v-model="form.intoInfo"
            placeholder=""
            size="mini"
            style="width: 50px"
          ></el-input>
          张，获得一个名额
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="valDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSetup" v-if="confirm"
          >确 定</el-button
        >
        <el-button type="primary" @click="editSetup" v-if="edit"
          >修 改</el-button
        >
      </div>
    </el-dialog>
    <template> </template>
  </div>
</template>
  </div>
</template>

<script>
import { setupApi } from "../../api/setup";
import { timestampToTime } from "../../utils/changeTimeStamp";
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "35%",
      total: 0,
      pageSize: 4,
      currentPage: 1,
      cardHead: "",
      belong: 0,
      confirm: true,
      edit: true,
      tableData: [],
      form: {
        monney: 0,
        joinNum: 0,
        intoNum: 0,
        intoInfo: 0,
        userfulDate: 0,
        addDate: 0,
        endTime: 0,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      valDate: "",
    };
  },
  methods: {
    editShow(e) {
      this.dialogFormVisible = true;
      this.confirm = false;
      this.edit = true;
      this.form = e;
    },
    editSetup() {
      this.dialogFormVisible = false;
      this.edit = true;
      // this.$delete(this.form, "addDate");
      // this.$delete(this.form, "endDate");
      this.form.addDate = Date.now();
      setupApi
        .changeSetup(this.form)
        .then((res) => {
          this.$message({ type: "success", message: "活动更新成功" });
          this.flashData();
        })
        .catch(() => {
          this.$message.error("活动更细失败");
        });
    },
    showbox() {
      this.dialogFormVisible = true;
      this.form = {};
      this.confirm = true;
      this.edit = false;
    },
    deletehandle(e) {
      this.$confirm("此操作将永久删除此活动，是否继续？", "警告", {
        confirmButtonText: "确定删除",
        type: "warning",
        cancelButtonText: "取消",
      })
        .then(() => {
          setupApi.deleteSetup({ _id: e._id }).then((res) => {
            this.$message({ type: "success", message: "删除成功" });
            this.flashData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    sizeChange(val) {
      this.pageSize = val;
    },
    addSetup() {
      this.dialogFormVisible = false;
      let data = {
        monney: this.form.monney,
        joinNum: this.form.joinNum,
        intoNum: this.form.intoNum,
        intoInfo: this.form.intoInfo,
        userfulDate: this.valDate[0] + "-" + this.valDate[1],
        endDate: this.valDate[1],
      };
      setupApi
        .addSetup(data)
        .then((res) => {
          this.flashData();
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(data);
    },
    flashData() {
      setupApi.getSetup().then((res) => {
        res.data.forEach((item) => {
          console.log(item.addDate);
          // item.addDate = timestampToTime(parseInt(item.addDate));
          item.addDate = item.addDate.split("").splice(0, 10).join("");
          item.endDate = item.endDate.split("").splice(0, 10).join("");
        });
        this.tableData = res.data;
        console.log(res);
        this.total = res.data.length;
      });
    },
  },
  beforeCreate() {
    setupApi.getSetup().then((res) => {
      res.data.forEach((item) => {
        console.log(item.addDate);
        // item.addDate = timestampToTime(parseInt(item.addDate));
        item.addDate = item.addDate.split("").splice(0, 10).join("");
        item.endDate = item.endDate.split("").splice(0, 10).join("");
      });
      this.tableData = res.data;
      console.log(res);
      this.total = res.data.length;
    });
  },
};
</script>

<style lang="less" scoped>
.main {
  .top {
    text-align: left;
    padding: 20px 40px;
  }
  .mid {
    padding: 10px 30px;
  }
}
</style>